<template>
  <div class="login-container">
    <!-- 横屏登录卡片（左右结构，百分比布局） -->
    <div class="login-card">
      <!-- 左侧：品牌/说明区域 -->
      <div class="login-card__left">
        <div class="login-card__content">
          <div class="login-card__logo">植物病害检测系统</div>
          <p class="login-card__desc">
            基于AI技术的植物健康诊断平台<br>
            快速识别病害，提供专业防治方案
          </p>
          <div class="login-card__illustration">
            <img src="https://picsum.photos/id/145/600/400" alt="植物病害检测示意图" class="illustration-img">
          </div>
        </div>
      </div>

      <!-- 右侧：登录表单区域 -->
      <div class="login-card__right">
        <el-card header="用户登录" class="form-card">
          <el-form
              ref="loginFormRef"
              :model="loginForm"
              :rules="loginRules"
              class="login-form"
          >
            <!-- 用户名输入框 -->
            <el-form-item prop="username">
              <el-input
                  v-model="loginForm.username"
                  placeholder="请输入用户名"
                  prefix-icon="User"
              ></el-input>
            </el-form-item>

            <!-- 密码输入框 -->
            <el-form-item prop="password">
              <el-input
                  v-model="loginForm.password"
                  type="password"
                  placeholder="请输入密码"
                  prefix-icon="Lock"
              ></el-input>
            </el-form-item>

            <!-- 登录按钮 -->
            <el-form-item>
              <el-button
                  type="primary"
                  class="login-btn"
                  @click="handleLogin"
              >
                登录
              </el-button>
            </el-form-item>

            <!-- 注册链接 -->
            <div class="register-link">
              还没有账号？<el-link type="primary" @click="toRegister">立即注册</el-link>
            </div>
          </el-form>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import request from '@/utils/request';
import { useUserStore } from '@/store/modules/user'; // 假设用Pinia存储用户状态

const router = useRouter();
const userStore = useUserStore();

// 表单数据
const loginForm = reactive({
  username: '',
  password: ''
});

// 表单规则（保持不变）
const loginRules = reactive({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
  ]
});

const loginFormRef = ref(null);
const isLoading = ref(false); // 登录按钮加载状态

// 登录逻辑（核心修改）
const handleLogin = async () => {
  // 1. 表单验证
  const valid = await loginFormRef.value.validate();
  if (!valid) return;

  try {
    isLoading.value = true;

    // 2. 调用登录接口（注意路径与后端一致）
    const res = await request.post('/auth/login', {
      username: loginForm.username,
      password: loginForm.password
    });

    // 3. 处理后端响应
    if (res.code === 200) {
      ElMessage.success('登录成功');

      // 4. 存储Token和用户信息
      localStorage.setItem('token', res.data.token); // 持久化存储Token
      userStore.setUserInfo(res.data.userInfo); // 存储用户信息到Pinia

      // 5. 跳转到首页
      router.push('/home');
    } else {
      ElMessage.error(res.message || '登录失败');
    }
  } catch (error) {
    ElMessage.error('网络错误，请稍后再试');
    console.error(error);
  } finally {
    isLoading.value = false;
  }
};

// 跳转到注册页
const toRegister = () => {
  router.push('/register');
};
</script>

<style scoped>
/* 关键：确保父元素高度为100%，让百分比生效 */
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* 登录页容器 - 百分比全屏 */
.login-container {
  height: 100vh;          /* 高度占满整个视口 */
  width: 100vw;           /* 宽度占满整个视口 */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa; /* 设置为你想要的背景色（如浅灰），替换黑色 */
  margin: 0;              /* 清除容器外边距 */
  padding: 0;             /* 清除容器内边距 */
}

/* 横屏登录卡片 - 百分比铺满 */
.login-card {
  width: 100%;
  max-width: 1000px; /* 可选：设置最大宽度，让宽屏更协调 */
  height: auto;      /* 高度自动适应内容 */
  display: flex;
  overflow: hidden;
  background-color: transparent;
}

/* 左侧区域 - 百分比宽度 */
.login-card__left {
  width: 60%; /* 左侧占60%宽度 */
  background: linear-gradient(135deg, #42b883 0%, #359574 100%);
  color: #fff;
  padding: 0 5%; /* 内边距用百分比 */
  display: flex;
  align-items: center;
  box-sizing: border-box; /* 确保padding不影响宽度计算 */
}

/* 左侧内容容器 */
.login-card__content {
  width: 100%;
  max-width: 600px; /* 限制最大宽度，避免超宽屏幕内容变形 */
}

.login-card__logo {
  font-size: 3vw; /* 字体大小用视口宽度百分比 */
  font-weight: bold;
  margin-bottom: 3%;
  letter-spacing: 1px;
}

.login-card__desc {
  font-size: 1.5vw;
  line-height: 1.8;
  margin-bottom: 5%;
  opacity: 0.95;
}

.login-card__illustration {
  width: 100%;
  height: 40%; /* 高度相对于父元素 */
  max-height: 300px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.illustration-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.login-card__illustration:hover .illustration-img {
  transform: scale(1.03);
}

/* 右侧区域 - 百分比宽度 */
.login-card__right {
  width: 40%; /* 右侧占40%宽度 */
  padding: 0 2%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #fff;
  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

.form-card {
  border: none;
  box-shadow: none;
  width: 90%;
  max-width: 380px;
  margin: 0 auto;
}

.login-form {
  margin-top: 5%;
}

.el-input {
  height: 50px;
  font-size: 16px;
}

.login-btn {
  width: 100%;
  height: 50px;
  font-size: 17px;
}

.register-link {
  text-align: center;
  margin-top: 5%;
  font-size: 15px;
}

/* 响应式调整 - 小屏幕垂直布局 */
@media (max-width: 900px) {
  .login-card__left, .login-card__right {
    width: 100%; /* 小屏幕时各占100%宽度 */
    height: auto;
  }

  .login-card {
    flex-direction: column;
    min-height: 100%;
  }

  .login-card__logo {
    font-size: 6vw; /* 小屏幕放大字体百分比 */
  }

  .login-card__desc {
    font-size: 3vw;
  }

  .login-card__illustration {
    height: 220px;
    max-width: 400px;
    margin: 0 auto;
  }
}
</style>
